<template>
    <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts';
  require('echarts/theme/macarons'); // echarts 主题
  import { debounce } from 'utils';

  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '96%'
      },
      height: {
        type: String,
        default: '500px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      dataAll: {
        type: Array  
      }
    },
    data() {
      return {
        chart: null,
        time: [],
        firstOverRate: [],
        comprehensiveFirstRate: []
      };
    },
    watch: {
        dataAll: {
            deep: true,
            handler(val) {
                this.setOptions(val)
            }
        }
    },
    mounted() {
      this.initChart();
      this.__resizeHanlder = debounce(() => {
        if (this.chart) {
            this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHanlder)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
        setOptions(listAll) { 
            this.time = [];
            this.firstOverRate = [];
            this.comprehensiveFirstRate = [];
            if (listAll.length > 0) {
                listAll.forEach(item => {
                    this.time.push(item.time);
                    this.firstOverRate.push(item.firstOverRate);
                    this.comprehensiveFirstRate.push(item.comprehensiveFirstRate);
                })
            }
            this.chart.setOption({
                color: ['#f2ad86', '#8ecac8'],
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        lineStyle: {
                            type: 'dotted',
                            color: '#ccc'
                        }
                    }
                },
                legend: {
                    data:[this.$t('ApprReport.firstOver2'), this.$t('overdueData.firstOverAll')]
                },
                grid: {
                    left: '8%',
                    bottom: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    name: this.$t('overdueData.time'),
                    nameTextStyle:{
                        width: 50,
                        fontSize: 16,  
                        padding: 10,
                        align: 'right'
                    },
                    boundaryGap: false,
                    data: this.time,
                    axisLabel: {  
                        interval:0,  
                        rotate:40  
                    }
                },
                yAxis: {
                    type: 'value',
                    name: this.$t('overdueData.firstOvers'),
                    nameTextStyle:{
                        fontSize:16,  
                        padding:10
                    },
                    splitLine: {
                        show: false
                    },
                    splitArea : {
                        show : false
                    }
                },
                series: [
                    {
                        name:this.$t('ApprReport.firstOver2'),
                        type:'line',
                        data: this.firstOverRate
                    },
                    {
                        name:this.$t('overdueData.firstOverAll'),
                        type:'line',
                        data: this.comprehensiveFirstRate
                    }
                ]
            })
        },
        initChart() {
            this.chart = echarts.init(this.$el, 'macarons')
            this.setOptions(this.dataAll);
        }
    }
}
</script>
<style scoped lang='scss'>
.chart{
    min-width: 800px!important;
    overflow: auto;
}
</style>
